<template>
  <div class="wrapper">
    <!-- 题号 -->
    <div class="code_list">
      <div  class="code_item" 
            v-for="(item,index) in qudata_all" 
            :key="index" 
            @click="skip(item,index)"
            :class="index === activeIndex?'active':''">{{index+1}}</div>
    </div>

    <!-- 文章嫩容 -->
    <div v-html="qudata.action" class="action"></div>
    <div class="qu_container"> 
      <div v-for="(item,index) in qudata.code_option" :key="index">
        {{item.codeValue}}. {{item.codeLabel}} 
      </div>
    </div>
    <div class="answer_container info" 
          v-show="answerShow">正确答案 <span class="keys">{{qudata.key}}</span></div>
    
    <!-- 操作 -->
    <div class="manipulate">
      <el-button type="success" class="button" @click="answerShow=true">查看答案</el-button>
      <el-button type="primary" class="button" @click="nextqu">下一题</el-button>
    </div>

  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      qudata_all:[],
      qudata:{},
      activeIndex:0,
      answerShow:false
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.get_quDataFun()
  },
  methods: {
    get_quDataFun(){
      this.$axios({
        methods:'get',
        url:"../../static/data/wanxing.json",
      }).then((response)=>{
        console.log(response)
        this.qudata_all = response.data.data;
        this.qudata = response.data.data[0]
      })
    },
    skip(row,index){
      this.answerShow = false
      this.qudata = row
      this.activeIndex = index
    },
    nextqu(){
      if(this.activeIndex <this.qudata_all.length-1){
        this.answerShow = false
        this.activeIndex++
        this.qudata = this.qudata_all[this.activeIndex]
      }else{
        this.$message({
          message: '最后一题',
          type: 'error'
        });
      }
    }


  },
};
</script>
<style scoped>
.answer_container{
  padding: 10px;
  color:#fff;
  margin-top: 10px;
}
.info{
  background: #909399;
}
.wrapper{
  width: 100vw;
  overflow: hidden;
}
.action{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  line-height: 40px;
  text-indent:25px;
}
.qu_container{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 16px;
  padding-top: 10px;
}
.key{
  text-align: left;
  margin:0 auto;
  width: 80%;
  padding-top: 10px;
  font-size: 18px;
}
.keys{
  letter-spacing:2px
}
.code_list{
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.code_item{
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 40px;
  margin-left: 10px;
  margin-top:10px;
}
.active{
  background:#409EFF;
  color: #fff;
}
.manipulate{
  position: fixed;
  right: 0px;
  top: 50%;
  display: flex;
  flex-direction: column;
}
.manipulate .button{
  margin-top: 10px;
}
</style>